<template>
  <div class="loginPage">
    <div class="loginContent">
      <div style="width: 700px;padding-bottom: 100px">
        <p>
          框架基于Springboot2和element ui2.8开发,做了深度封装,在element ui基础了做了很多组件的扩展,起手框架是从element admin开始的
          <br/>
          界面太丑了?这是一个基础框架,可以灵活的修改,加几个首页部件,加上自己的logo等等可以让界面变好
        </p>
        <p style="color:red">
          <a href="https://gitee.com/wang1657/pt" target="_blank">项目下载地址:https://gitee.com/wang1657/pt</a>
        </p>
        <div>闲聊qq群:698840297</div>
        <div style="margin-top: 20px">--------------------已实现功能------------------------</div>
        框架
        <div>--vue部分-</div>
        <li>菜单显示与查询</li>
        <li>el-container下的4个布局,扩展为可拖动并增加标题</li>
        <li>列表整合分页查询</li>
        <li>增删改查与后台一致性约定,无需代码</li>
        <li>列表下拉</li>
        <li>列表设置:列表自定义展示,冻结,顺序</li>
        <li>列表虚拟滚动条,支持无限数据</li>
        <li>一行代码切换为行内编辑</li>
        <li>弹窗可拖动全屏</li>
        <li>国际化(中文当key,组件内部实现)</li>
        <li>换肤</li>
        <li>列表的pdf打印</li>
        <li>列表的excel导出及导入</li>
        <li>文件上传下载组件</li>
        <li>集成fontawesome</li>
        <li>校验简化及显示优化</li>
        <li>消息通知用的websocket</li>
        <li>首页小部件展示</li>
        <li>多任务页右键功能</li>
        <li>api文档</li>
        <div>--springboot部分-</div>
        <li>token登录,不会因为session超时,退出界面</li>
        <li>集团化权限(数据权限):给角色授权某个菜单的数据权限</li>
        <li>JpaUtil编写jpql或者sql更简单,自动实现分页排序</li>
        <li>MsgUtil给用户消息发送</li>
        <li>PtUtil最常用的工具类集合</li>
        <li>springboot缓存</li>
        <li>数据库连接池:Druid</li>
        <li>权限:shiro</li>
        <li>api文档</li>
        <div>----------------------待增加-----------------------</div>
        <li>根据需要增加开发示例</li>
        <li>代码生成器一键生成所有代码</li>
        <li>移动端框架</li>
      </div>
    </div>
    <div class="loginArea">
      <div class="panel-body loginForm">
        <el-form :model="loginForm" :rules="loginRules" autoComplete="on" class="form-horizontal" ref="loginForm">
          <el-row>
            <el-col :span="24" style="margin-bottom: 10px;border-bottom:1px dashed #000">
              DEVPT开发平台<br/> <br/>
            </el-col>
            <el-col :span="24" style="margin-bottom: 20px">
              <el-input autocomplete="on" autofocus
                        placeholder="用户名" prefix-icon="el-icon-user" size="large" v-model="loginForm.account"/>

            </el-col>
            <el-col :span="24" style="margin-bottom: 20px">
              <el-input @keyup.enter.native="handleLogin" autocomplete="on" autofocus placeholder="密码"
                        prefix-icon="el-icon-lock" style="width: 100%" type="password" v-model="loginForm.password"/>

            </el-col>
            <el-col :span="24" style="margin-bottom: 10px">
              管理员账号:admin密码 admin
            </el-col>
            <el-col :span="24">
              <pt-button :loading="loading" @click=" handleLogin" type="primary"> 登&nbsp;&nbsp;&nbsp;&nbsp;录
              </pt-button>
            </el-col>
          </el-row>
          <!--<div  class="form-group">
            <div class="col-sm-6">
              <pt-button  class="btn btn-primary btn-block login_bn"  @click="qrCodeLogin">二维码登录
              </pt-button>
            </div>
          </div>-->
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {setToken} from '@/utils/auth'

  export default {
    name: 'login',
    components: {},
    data() {
      return {
        loginForm: {
          account: 'admin',
          password: 'admin'
        },
        loginRules: {
          account: [{required: true, trigger: 'blur', message: '账号不能为空'}]
        },
        pwdType: 'password',
        loading: false,
        showDialog: false,
        juIdStr: '',
        codeVal: '',
        showtab: '1'

      }
    },
    mounted() {
    },
    methods: {
      showPwd() {
        if (this.pwdType === 'password') {
          this.pwdType = ''
        } else {
          this.pwdType = 'password'
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
              this.loading = false
              this.$store.dispatch('GenerateRoutes', {}).then(() => {
                this.$router.addRoutes(this.$store.getters.addRouters)
                this.$router.push({path: '/'})
              })
              // this.showDialog = true
            }).catch((data) => {
              this.loading = false
              this.$message({
                type: 'error',
                message: data.message
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .loginPage {
    background-color: aliceblue;
    height: 100%;
    width: 100%;
    overflow: auto;

    /deep/ input {
      height: 50px !important;
      padding-top: 0;
    }

    .loginContent {
      padding-top: 50px;
      padding-left: 50px;
    }

    .loginArea {
      padding: 30px 20px;
      width: 400px;
      height: 250px;
      float: right;
      position: absolute;
      top: 150px;
      right: 80px;
      background-color: #f0f2f5;
    }

    /deep/ button {
      width: 100%;
      height: 50px;
    }
  }
</style>
<!--<style src="/assets/css/bootstrap.min.css" scoped></style>
<style src="/assets/css/login.css" scoped></style>
<style src="/assets/css/navbar-static-top.css" scoped></style>-->
